<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/订单.css" />
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<script type="text/javascript" src="js/html5shiv.min.js"></script>
		<script type="text/javascript" src='js/flexible.debug.js'></script>
		<style>
			.frred {
				color: #FF0000;
				font-size: 12px;
			}
			
			.frbule {
				color: #0066CC;
				font-size: 12px;
			}
			
			.fgren {
				color: #339933;
				font-size: 12px;
			}
			.check ul{
				margin-top: 30px;
			}
			.hh1,.hh2{
				display: none;
				margin-left: 190px;
				margin-top: 8px;
				font-size: 20px;
				color: #49A430;
			}
		</style>
	</head>

	<body>
		<header>
			<span class="left"></span>
			<span class="center">订单</span>
			<span class="right"></span>
		</header>
		<div class="bg"><img src="img/bg1.png" /></div>
		<div class="main">
			<div class="tou">
				<ul id="ul">
					<li class="active">我的账户</li>
					<li>我的收藏</li>
					<li>我的订单</li>
				</ul>
			</div>
			<div class="content">
				<dl class="one" style="display: block;">
					<div class="nav">
						<label class="label">账号：<input type="text" placeholder="请输入您的账号" id="text1" class="user" required />
						<p class="hh1">您输入的用户名有无</p>
						</label>
						<label class="lab">密码：<input type="text" placeholder="请输入您的密码"  id="text2"  required pattern=""/>
						<p class="hh2">您输入的用户名有无</p>
						</label>
					</div>
					<div class="check">
						<ul>
							<li>记住密码</li>
							<li><u>忘记密码？</u></li>
						</ul>

					</div>
					<div class="deng">
						<li id="btn">
							登录
						</li>
						<li id="li" onclick="window.location='dingdan2.html'">
							没有账户，去注册！
						</li>
					</div>
				</dl>

				<dl class="three">
					<ul class="bao">

					</ul>
				</dl>

				<dl class="four">
					<ul class="active">
						<li>
							<div class="left"><img src="img/xianglayachun.png"></div>
							<div class="center">
								<p>香辣鸭唇</p>
								<p>单价：<span>56元/例</span></p>
							</div>
							<div class="right">
								<button class="btn">删除</button>
							</div>
						</li>
						<li>
							<div class="left"><img src="img/liangbansunsi.png"></div>
							<div class="center">
								<p>凉拌笋丝</p>
								<p>单价：<span>56元/例</span></p>
							</div>
							<div class="right">
								<button class="btn">删除</button>
							</div>
						</li>
						<li>
							<div class="left"><img src="img/xianglajichi.png"></div>
							<div class="center">
								<p>香辣鸡翅</p>
								<p>单价：<span>56元/例</span></p>
							</div>
							<div class="right">
								<button class="btn">删除</button>
							</div>
						</li>
						<li>
							<div class="left"><img src="img/xianglayachun.png"></div>
							<div class="center">
								<p>香辣鸭唇</p>
								<p>单价：<span>56元/例</span></p>
							</div>
							<div class="right">
								<button class="btn">删除</button>
							</div>
						</li>
						<li>
							<div class="left"><img src="img/liangbansunsi.png"></div>
							<div class="center">
								<p>凉拌笋丝</p>
								<p>单价：<span>56元/例</span></p>
							</div>
							<div class="right">
								<button class="btn">删除</button>
							</div>
						</li>
						<li>
							<div class="left"><img src="img/xianglajichi.png"></div>
							<div class="center">
								<p>香辣鸡翅</p>
								<p>单价：<span>56元/例</span></p>
							</div>
							<div class="right">
								<button class="btn">删除</button>
							</div>
						</li>
					</ul>
				</dl>

			</div>

		</div>
		<div class="bga "><img src="img/bg1.png" /></div>
		<footer>
			<ul>
				<li>
					<a href="#" onclick="location.href='shouye.html'"><img src="img/fza.png" />首页</a>
				</li>
				<li>
					<a href="#" onclick="location.href='fujin.html'"><img src="img/qa.png" />附近</a>
				</li>
				<li>
					<a href="#" class="curr" onclick="location.href='dingd.html'"><img src="img/th.png" />订单</a>
				</li>
				<li>
					<a href="#" onclick="location.href='gengduo.html'"><img src="img/xin.png" />更多</a>
				</li>
			</ul>
		</footer>
		<script src="js/flexible_css.debug.js"></script>
		<script src="js/jquery-1.11.2.min.js"></script>
		<script>
			$(function() {

						$('#ul li').click(function() {
							var index = $(this).index();
						$(this).addClass('active').siblings().removeClass('active');
							$('.content dl').eq(index).show().siblings().hide();

						});

						$("#li").click(function() {
							window.open = "dingdan2.html"
						})
						$(".four ul li .btn").click(function() {
							var index = $(this).index();
							$(".four ul li").eq(index).slideUp();
						})

						
                        $('.deng li:first-child').click(function() {
				$('#ul li').eq(1).addClass('active').siblings().removeClass('active');
							$('.content dl').eq(1).show().siblings().hide();
						});
						$.get('js/dingdan3.json', function(data) {
							$.each(data, function(i) {
								var aa = $("<li></li>")
								aa.appendTo(".bao")
								$('<div class="left"><img src="' + data[i].img + '"/></div>').appendTo(aa);
								$('<div class="right"><p>' + data[i].name + '</p><p>' + data[i].price + '</p></div>').appendTo(aa);

							});
						}, "json");
						
					
					/*$('#btn').click(function(){
						var val = $('#text1').val();
						var red = $('#text2').val();
						var reg = /^[0-9a-zA-Z]{6,10}$/;
						var rega = /^\w{8,12}$/;
						if($('#text1').val() = '' && $('#text2').val() = ''){
							$('.hh1').show();
							$('.hh2').show();
						}else if(reg.test(val) && red = ''){
							$('.hh2').show();
						}else if(rega.test(red) && val = ''){
							$('.hh1').show();
						}else if(rega.test(red) && reg.test(val)){
							
						}else{
							$('.hh1').show();
							$('.hh2').show();
						}
					})
					
						*/
						});
		</script>
	</body>

</html>